<template>
    <div class="system-user-dialog-container">

        <el-dialog draggable v-model="visible" :close-on-click-modal="false" :title="$t('appuser.userDetail')">

            <div class="userinfo-box">
                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.username') }}</div>
                    <div class="item-value">{{ userInfo.username }}</div>
                </div>

                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.avatar') }}</div>


                    <div class="item-value">
                        <span v-if="!userInfo?.avatar">-</span>
                        <img style="width: 60px;height: 60px; border-radius: 50%;" v-else
                            :src="$getFileUri(userInfo?.avatar)" />
                    </div>
                </div>
                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.name') }}</div>
                    <div class="item-value">{{ userInfo!.name }}</div>
                </div>

                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.phone') }}</div>
                    <div class="item-value">{{ userInfo!.phone }}</div>
                </div>
                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.role') }}</div>
                    <div class="item-value">{{ userInfo!.roleList[0] && userInfo!.roleList[0].roleName }}</div>
                </div>
                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.email') }}</div>
                    <div class="item-value">{{ userInfo!.email }}</div>
                </div>
                <div class="box-item">
                    <div class="item-label">{{ $t('appuser.lockFlag') }}</div>
                    <div class="item-value"> <el-tag class="ml-2" :type="userInfo!.lockFlag == '9' ? 'danger' : ''"> {{
                        userInfo!.lockFlag == "9" ? '禁用' : "有效" }}</el-tag></div>
                </div>
            </div>
            <div class="order-title">
                {{ $t("appuser.userOrder") }}
            </div>
            <el-table :data="state.dataList" border :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" v-loading="state.loading">
                <el-table-column type="expand">
                    <template #default="{ row }">
                        <el-table :data="row.orderItemList" :cell-style="tableStyle.cellStyle"
                            :header-cell-style="tableStyle.headerCellStyle">

                            <el-table-column prop="prod" :label="$t('Order.productInfo')">
                                <template #default="props">
                                    <div class="prod-img-box">
                                        <img class="br-12" :src="$getFileUri(props.row.pic)" />
                                        <!-- <img src="/@/assets/lockScreen.png"> -->
                                        <div>
                                            <span>{{ $t('Order.prodName') }}:{{ props.row.prodName }}</span>
                                            <div>{{ props.row.properties }}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="prod" :label="$t('Order.prodName')"> </el-table-column> -->
                            <el-table-column prop="prodId" :label="$t('Order.prodId')"> </el-table-column>
                            <el-table-column prop="amount" :label="$t('Order.amount')">
                                <template #default="{ row }">
                                    {{ $amountFormat(row.amount) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="num" :label="$t('Order.num')"> </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="id" header-align="center" :label="$t('Order.OrderId')" min-width="140"
                    show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.id }}
                        <SvgIcon name="ele-CopyDocument" class="icon_copy" @click="copyText(scope.row.id)" />
                    </template>
                </el-table-column>
                <el-table-column prop="state" :label="$t('Order.state')" show-overflow-tooltip>
                    <template #default="{ row }">
                        <OrderStateTag :state="row.state" />
                    </template>
                </el-table-column>
                <el-table-column prop="orderAmount" :label="$t('Order.orderAmount')" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ $amountFormat(row.orderAmount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="actualAmount" :label="$t('Order.actualAmount')" show-overflow-tooltip><template
                        #default="{ row }">
                        {{ $amountFormat(row.actualAmount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="reduceAmount" :label="$t('Order.reduceAmount')" show-overflow-tooltip><template
                        #default="{ row }">
                        {{ $amountFormat(row.reduceAmount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="payTime" :label="$t('Order.time')" show-overflow-tooltip min-width="180">
                    <template #default="{ row }">
                        <div v-if="row.createTime">
                            {{ $t('Order.createTime') }}：{{ row.createTime }}
                        </div>
                        <div v-if="row.payTime">
                            {{ $t('Order.payTime') }}：{{ row.payTime }}
                        </div>
                        <div v-if="row.deliveryTime">
                            {{ $t('Order.deliveryTime') }}：{{ row.deliveryTime }}
                        </div>
                        <div v-if="row.receivingTime">
                            {{ $t('Order.receivingTime') }}：{{ row.receivingTime }}
                        </div>
                        <div v-if="row.completeTime">
                            {{ $t('Order.completeTime') }}：{{ row.completeTime }}
                        </div>
                        <div v-if="row.cancelTime">
                            {{ $t('Order.cancelTime') }}：{{ row.cancelTime }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination">
            </pagination>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { getPage } from '/@/api/bizs/Order';
import { BasicTableProps, useTable } from '/@/hooks/table';
import OrderStateTag from '/@/components/biz/orderStateTag.vue';
import { getObj, } from '/@/api/app/appuser';

const visible = ref<boolean>(false)

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
        uid: ""
    },
    pageList: getPage,
    descs: ['create_time'],
});
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

const getUserOrderFn = async (userId: string) => {
    state.queryForm.uid = userId
    getUserData(userId)
    getDataList()
}
interface IUser {
    userId?: string;
    username?: string;
    password?: string;
    phone?: string;
    avatar?: string;
    nickname?: string;
    name?: string;
    email?: string;
    createTime?: any;
    delFlag?: string;
    tenantId?: string;
    lastModifiedTime?: any;
    lockFlag?: string;
    roleList?: RoleList[];
    code?: any;
    birthday?: any;
    gender?: any;
    lang?: any;
    timezone?: any;
    balance?: any;
    inviteId?: any;
    invitationCode?: any;
    source?: any;
    isNewUser?: any;
    isFactory?: any;
    registerTime?: any;
    registerIp?: any;
    loginTime?: any;
    loginIp?: any;
}

interface RoleList {
    roleId: string;
    roleName: string;
    roleCode: string;
    roleDesc: string;
    createBy?: any;
    updateBy?: any;
    createTime: string;
    updateTime: string;
    delFlag: string;
    tenantId?: any;
}


const userInfo = ref<IUser>({
    roleList: []
})
// 获取用户信息
const getUserData = async (userId: string) => {
    let res = await getObj(userId)
    userInfo.value = res.data
}


defineExpose({
    visible,
    getUserOrderFn
})
</script>
<style lang="scss" scoped>
.prod-img-box {
    display: flex;
    gap: 12px;

    img {
        width: 100px;
    }
}

.order-title {
    font-size: 16px;
    border-left: 3px solid gray;
    padding-left: 20px;
    // margin-bottom: 20px;
}

.userinfo-box {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 30px;
    margin-bottom: 20px;

    .box-item {
        width: 40%;
        display: flex;
        gap: 20px;
        align-items: center;

        .item-label {
            font-weight: 700;
            width: 80px;
            text-align: right;
        }
    }
}
</style>
